در‌این نوشته‌ی علمی در باره float and clear در ورقه بندی طراحی سایت شرکتی حرف خوا هیم کرد. این خصوصیت نقش مهمی در ریسپانسیو کردن صفحه ها بازی میکند.
یادگرفتن ساخت وب سایت ساختار وب سایت با خصوصیت float

یادگرفتن برگه بندی با CSS بوسیله float and clear

خصوصیت float معلوم می نماید که یک المان می بایست شناور باشد یا این که نه

خصوصیت clear برای کنتر اخلاق و رفتار موادسازنده شناور به فعالیت میرود.

خصوصیت float :

به کار گیری از این خصوصیت سهل و آسان میباشد . این خصوصیت قادر است برای اینکه متنی را در نزدیکی یک عکس به اکران در بیاورید مصرف شود.

در نمونه های ذیل شما عکسی را می‌بینید که به سمت راست کاغذ میرود تا متن در سوی چپ آن به اکران گذارده خواهد شد.

img {
float: right;
margin: 0 0 10px 10px;
}

مشاهده فیض

خصوصیت clear

خصوصیت clear برای در اختیار گرفتن کردار عنصر شناور استعمال می‌شود.

عناصری که پس از عنصر شناور قرار دارا هستند عنصر شناور را اشراف می نمایند برای خودداری از این زمینه از خصوصیت clear استعمال نمایید.

خصوصیت clear معین می نماید که کدام جهت از عنصر می بایست شناور خواهد شد و یا این که شناور نشود:

div {
clear: left;
}

مشاهده فیض

هک clearfix :

در شرایطی که المانی بلند خیس از المان دیگر باشد و این المان بلند خیس داخل المان دیگر قرار داشته باشد المان بلند خیس از محدوده خویش بالاتر خواهد رفت.

با اضافه کردن overflow: auto; این نقص‌ حل گردد:

.clearfix {
overflow: auto;
}

مشاهده سود

خصوصیت overflow:auto clearfix تا زمانیکه بتوانید بدرستی margins وpadding ها را در دست گرفتن فرمایید صحیح عمل خواهد کرد برای اینکه مطمئن باشیم مشکلی پیش نمی آید بجای کد بالا از این کد استعمال نمایید.

.clearfix::after {
content: \"\";
clear: both;
display: table;
}

مشاهده فیض

به ::after شبه عنصر می گوییم و بعدا در رابطه آن سخن خوا هیم کرد.

مثال های برای ظواهر تارنما

اینکه کل ظواهر یک وب سایت از خصوصیت float استعمال نماید به طور کامل طبیعی میباشد.

نمونه

.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}

.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: \"\";
clear: both;
display: table;
}

.menu {
width: 25%;
}

.content {
width: 75%;
}

مشاهده فیض

کل خصوصیت های Float در Css

خصوصیت

توضیحات

clear

مشخص و معلوم میکند که کدام طرف از یک المان می بایست شناور خواهد شد و یا این که شناور نشود.

float

انتخاب شناور شدن و یا این که نشدن یک المان

overflow

معین میکند که در‌صورتی‌که المان از فضای خویش بزرگتر باشد چه اتفاقی چهره دهد.

overflow-x

معلوم میکند که کناره های چپ و راست المان در شکل بزرگتر بودن متن چه خواهند کرد

overflow-y

مشخص و معلوم میکند که کناره های بالا و تحت المان در شکل بزرگتر بودن متن چه خواهند کرد